<template>
	<div class="front_agenda_container">
		<div class="sidebar_box">
			<div :class="['title', !collapsed ? 'fold' : 'unfold']">
				<h2 v-if="!collapsed">消息中心</h2>
				<a-button type="text" @click="toggleCollapse">
					<icon-menu-unfold v-if="collapsed" />
					<icon-menu-fold v-else />
				</a-button>
			</div>
			<a-menu
				:style="{ width: '200px' }"
				auto-open-selected
				auto-scroll-into-view
				:collapsed="collapsed"
				:selectedKeys="selectedKeys"
				@menu-item-click="handleSelectRouter"
			>
				<a-sub-menu key="dispose">
					<template #icon><icon-apps></icon-apps></template>
					<template #title>处理类</template>
					<a-menu-item key="/front/agenda/dispose/todo">未处理</a-menu-item>
					<a-menu-item key="/front/agenda/dispose/wait">稍后处理</a-menu-item>
					<a-menu-item key="/front/agenda/dispose/done">已处理</a-menu-item>
				</a-sub-menu>
				<a-sub-menu key="review">
					<template #icon><icon-bug></icon-bug></template>
					<template #title>阅办类</template>
					<a-menu-item key="/front/agenda/review/unread">待阅</a-menu-item>
					<a-menu-item key="/front/agenda/review/wait">稍后阅读</a-menu-item>
					<a-menu-item key="/front/agenda/review/readed">已阅</a-menu-item>
				</a-sub-menu>
				<a-sub-menu key="reading">
					<template #icon><icon-bulb></icon-bulb></template>
					<template #title>阅读类</template>
					<a-menu-item key="/front/agenda/reading/unread">待阅</a-menu-item>
					<a-menu-item key="/front/agenda/reading/wait">稍后阅读</a-menu-item>
					<a-menu-item key="/front/agenda/reading/readed">已阅</a-menu-item>
				</a-sub-menu>
				<a-sub-menu key="system">
					<template #icon><icon-bulb></icon-bulb></template>
					<template #title>系统通知类</template>
					<a-menu-item key="/front/agenda/system/unread">未处理</a-menu-item>
					<a-menu-item key="/front/agenda/system/readed">已处理</a-menu-item>
				</a-sub-menu>
			</a-menu>
		</div>
		<router-view class="content_box"></router-view>
	</div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
const collapsed = ref(false);
const selectedKeys = ref([route.path]);

// 监听路由变化，更新选中菜单
watch(
	() => route.path,
	(newPath) => {
		selectedKeys.value = [newPath];
	}
);

const toggleCollapse = () => {
	collapsed.value = !collapsed.value;
};

const handleSelectRouter = (route: string) => {
	router.push(route);
};
</script>

<style lang="scss" scoped>
.front_agenda_container {
	display: flex;
	height: 100%;
	.sidebar_box {
		display: flex;
		flex-direction: column;
		flex-shrink: 0;
		border-right: solid 1px var(--color-border);
	}
	.title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: solid 1px var(--color-border);
		height: 48px;
		h2 {
			font-size: 15px;
		}
		.arco-btn {
			padding: 0;
		}
		&.fold {
			padding: 0 20px;
		}
		&.unfold {
			padding: 0 16px;
		}
	}
	.arco-menu-vertical {
		flex: 1;
		overflow: auto;
		:deep(.arco-menu-inner) {
			padding-top: 8px;
			padding-bottom: 8px;
		}
	}
	.content_box {
		flex: 1;
		margin: 16px;
		padding: 16px;
		overflow: hidden;
		background-color: #fff;
		border-radius: 4px;
		box-shadow: 0 0 100px -10px rgba(0, 0, 0, 0.1);
		&.front_agenda_body {
			display: flex;
			flex-direction: column;
		}
	}
}
</style>
